
<%@ page isELIgnored="false" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>主页</title>

    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/mylayer.js" type="text/javascript" charset="utf-8"></script>

</head>
<body class="layui-layout-body" >
<div class="layui-layout layui-layout-admin" >
    <div class="layui-header">
        <div class="layui-logo">学生宿舍管理系统</div>
        <ul class="layui-nav layui-layout-left"></ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <%-- 				        <img src="<%=path%>/img/fei.png" --%>
                    <!-- 				        class="layui-nav-img"/> -->
                    <img id="avator" width="40px" height="30px" src="" /> ${admin.m_name}
                </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="javascript:openUser()">基本资料</a>
                    </dd>
                    <dd>
                        <a href="javascript:openPass()">修改密码</a>
                    </dd>
                    <dd>
                        <a href="javascript:openPic()">修改头像</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:logout()">注销</a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">基本功能</a>
                    <dl class="layui-nav-child">
                        <dd>
                        	<a href="javascript:;"
                        	   <%--data-url="/user?method=selectByPage"--%>
                               data-url="/page/studentM"
                        	   class="site-demo-active">学生管理</a>
                        </dd>
                        <dd>
                        	<a href="javascript:;"
                        	   data-url="/page/dormitoriesM"
                        	   class="site-demo-active">宿舍管理</a>
                        </dd>
                        <dd>
                            <a href="javascript:;"
                               data-url="/page/buildingsM"
                               class="site-demo-active">宿舍楼管理</a>
                        </dd>
                        <dd>
                        	<a href="javascript:;"
                        	   data-url="/page/echarts"
                        	   class="site-demo-active">统计图表</a>
                        </dd>
                        <dd>
                            <a href="javascript:;"
                               data-url="/page/record"
                               class="site-demo-active">入住记录</a>
                        </dd>

                        <%--动态增加侧边栏--%>
                        <%--<c:forEach items="${navigationList}" var="auth">--%>
                        <%--    <dd>--%>
                        <%--        <a href="javascript:;" class="site-demo-active" data-url="${auth.path}">--%>
                        <%--                ${auth.name}--%>
                        <%--        </a>--%>
                        <%--    </dd>--%>
                        <%--</c:forEach>--%>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body"><!-- 内容主体区域 -->
        <iframe name="rightframe" width="99%" height="97%" src="/page/echarts"></iframe>
    </div>
</div>
<script src="static/multiavatar.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/mylayer.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/kindeditor/kindeditor.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var $ = layui.jquery;
    var layer = layui.layer;
    var element = layui.element;
    layui.use(function(){
            // 获取用户的 id 和用户名
            var userId = '${admin.adminId}';
            var username = '${admin.username}';
            var avatarname = '${admin.avatar}';
            // 构建头像的 URL
            var avatarUrl = '/pic/Avatar/' + avatarname;
            // 设置头像图片的 src 属性
            $('#avator').attr('src', avatarUrl);
            $('#uploadImg').attr('src', avatarUrl);

    });



    $('.site-demo-active').click(function () {
        window.open($(this).data('url'), "rightframe");
    });
    element.render();// element.init();
    function openURL(url) {
        window.open(url, "rightframe");
    }

    function logout() {
        layer.confirm('您确认要删除么?', {icon:3}, function() {
            $.post(
                '/user?method=loginout',
                function (result) {
                    if (result.code == 0) {
                        location.href = '/';
                    }
                },
                'json'
            );
        });
    }
    function openPass(){
        // 在此处输入 layer 的任意代码

        layui.use(['form'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            $('#passForm input[type="password"]').val('');
            var index1= layer.open({
                type: 1, // page 层类型
                area: ['400px', '300px'],
                title: '修改密码',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                maxmin: true, // 允许全屏最小化
                anim: 2, // 0-6 的动画形式，-1 不开启
                content: $('#passForm') // 弹出框中的内容从页面上的某个元素中获取
            });

            // 提交事件
            form.on('submit(formDemo)', function (data) {
                var field = data.field; // 获取表单字段值
                // 显示填写结果，仅作演示用
                // 此处可执行 Ajax 等操作
                $.post(
                    '/user?method=updatePwd',
                    field,
                    function (result){
                        //刷新表格提示信息
                        if (typeof result == 'string') {
                            result = JSON.parse(result);
                        }
                        console.log(result.data);
                        if (result.code === 1){
                           mylayer.errorMsg(result.msg)
                            // 关闭对应的弹层
                            layer.close(index1);
                        }
                        if (result.code === 0){
                            //修改成功
                            // 关闭对应的弹层
                            layer.close(index1);
                            mylayer.okUrl(result.msg,'/page/login');
                        }
                    },
                    'json'
                );
                return false; // 阻止默认 form 跳转
            });
        });

    }
    function openPic(){
        // 在此处输入 layer 的任意代码

        layui.use(['form'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            var upload = layui.upload;
            var element = layui.element;
            $('#passForm input[type="password"]').val('');
            var index1= layer.open({
                type: 1, // page 层类型
                area: ['400px', '300px'],
                title: '修改头像',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                maxmin: true, // 允许全屏最小化
                anim: 2, // 0-6 的动画形式，-1 不开启
                content: $('#updateAvator') // 弹出框中的内容从页面上的某个元素中获取
            });
            // 单图片上传
            var uploadInst = upload.render({
                elem: '#uploadBtn',
                url: '/upload', // 实际使用时改成您自己的上传接口即可。
                before: function(obj){
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#uploadImg').attr('src', result); // 图片链接（base64）
                    });
                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                },
                done: function(res){
                    // 若上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }
                    // 上传成功的一些操作
                    location.reload();
                    $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                },
                error: function(){
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function(n, elem, e){
                    element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                    if(n == 100){
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });

            // 提交事件
            form.on('submit(formDemo)', function (data) {
                var field = data.field; // 获取表单字段值
                // 显示填写结果，仅作演示用
                // 此处可执行 Ajax 等操作
                $.post(
                    '/user?method=updatePwd',
                    field,
                    function (result){
                        //刷新表格提示信息
                        if (typeof result == 'string') {
                            result = JSON.parse(result);
                        }
                        console.log(result.data);
                        if (result.code === 1){
                            mylayer.errorMsg(result.msg)
                            // 关闭对应的弹层
                            layer.close(index1);
                        }
                        if (result.code === 0){
                            //修改成功
                            // 关闭对应的弹层
                            layer.close(index1);
                            mylayer.okUrl(result.msg,'/page/login');
                        }
                    },
                    'json'
                );
                return false; // 阻止默认 form 跳转
            });
        });

    }


</script>

<!-- 修改密码的表单 -->
<div id="passForm" style="display: none;">
    <form class="layui-form" >
        <div class="layui-form-item">
            <label class="layui-form-label " >旧密码</label>
            <div class=" layui-input-inline">
                <input type="password" name="oldPass" required lay-verify="required" placeholder="请输入旧密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class=" layui-input-inline">
                <input type="password" name="newPass" required lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class=" layui-input-inline">
                <input type="password" name="RnewPass" required lay-verify="required" placeholder="确认新密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            </div>
        </div>
    </form>
</div>
<div id="updateAvator"  class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="width: 132px;display: none;" >
    <div class="layui-upload-list ">
        <img class="layui-upload-img" id="uploadImg"  style="width: 100%; height: 92px;">
        <div id="ID-upload-demo-text"></div>
    </div>
    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
        <div class="layui-progress-bar" lay-percent=""></div>
    </div>
    <button type="button" class="layui-btn" id="uploadBtn">
        <i class="layui-icon layui-icon-upload"></i> 单图片上传
    </button>
</div>
<script>


</script>
</body>
</html>